<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="ftl/css/bootstrap.min.css">
	<link rel="stylesheet" href="ftl/css/laypage.css">

	<script src="ftl/js/vue/vue.min.js"></script>
	<script src="ftl/js/jquery/jquery.min.js"></script>
	<script src="ftl/js/laypage/laypage.js" charset="utf-8"></script>
	<script src="ftl/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<div id="app" class="container">
	<form class="form-inline bg-danger" role="form">
		查询条件:
		<div class="form-group">
			<label class="sr-only" for="carid"></label>
			<input type="text" class="form-control" id="carid" placeholder="车牌号">
		</div>

		<div class="form-group">
			<label class="sr-only" for="headman"></label>
			<input type="text" class="form-control" id="headman" placeholder="经办人员">
		</div>
		<div class="form-group">
			<label class="sr-only" for="headmobile"></label>
			<input type="text" class="form-control" id="headmobile" placeholder="经办手机">
		</div>

		<button type="button" id="findUser" class="btn btn-success">查询用户</button>
		<button type="button" id="addCars" class="btn btn-danger">增加用户</button>
	</form>

	<div class="table-responsive">
		<table class="table">
			<thead>
			<tr class="success">
				<th>车辆编号</th>
				<th>发车里程</th>
				<th>发车油量</th>
				<th>出车时间</th>
				<th>经办人员</th>
				<th>经办人手机</th>
				<th>换车时间</th>
				<th>还车里程</th>
				<th>还车油量</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody>
			<tr class="active" v-for="(item,index) in result">
				<td>{{item.carid}}</td>
				<td>{{item.initmile}}</td>
				<td>{{item.initoil}}</td>
				<td>{{item.usecartime}}</td>
				<td>{{item.headman}}</td>
				<td>{{item.headmobile}}</td>
				<td>{{item.returntime}}</td>
				<td>{{item.returnmile}}</td>
				<td>{{item.returnoil}}</td>
				<td>
					<a href="#" @click="editEvent(item.recordid)">编辑</a>
					<a href="#" @click="delEvent(item.recordid)">删除</a>
				</td>
			</tr>
			</tbody>
			<tr>
				<td colspan="3">
					<div id="pagenav"></div>
				</td>
			</tr>
		</table>
	</div>
</div>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			result: []
		}
	});
	var getUserPageList = function (curr) {
		$.ajax({
			type: 'POST',
			dataType: 'json',
			url: '/selgetPage',
			data: {
				pageNum: curr || 1,
				pageSize: 5,
				carid: $("#carid").val(),
				headman:$("#headman").val(),
				headmobile:$("#headmobile").val()

			},
			success: function (msg) {
				app.result = msg.page;
				laypage({
					cont: "pagenav",
					pages: msg.totalPage,
					skin: "#DB7023",
					first: "首页",
					last: "最后一页",
					curr: curr || 1,
					jump: function (obj, first) {
						if (!first) {
							getUserPageList(obj.curr);
						}
					}
				});
			}
		});
	};

	getUserPageList();

	//查找用户
	$("#findUser").click(function () {
		getUserPageList();
	});

	//添加用户
	$("#addCars").click(function () {
		layer.open({
			type:2,
			title:"添加用户",
			fix: false,
			maxmin: true,
			shadeClose: true,
			area: ['1000px', '600px'],
			content: "/selfuse-add",
			end: function () {
				getUserPageList();
			}
		})
	})

	//删除用户
	var delEvent = function (recordid) {
		//删除确认框
		layer.confirm('确认删除？', {
					btn: ['是', '否']
				}, function () {
					//是
					$.ajax({
						type: "post",
						dataType: "json",
						url: "/selDel",
						data: {
							recordid: recordid
						},
						success: function (msg) {
							getUserPageList();
							layer.msg('已删除', {icon: 6});
						}
					});
				}, function () {

				}
		)
	}
	//修改用户
	var editEvent = function (recordid) {
		layer.open({
			type: 2,
			title: "编辑用户",
			fix: false,
			maxmin: true,
			shadeClose: true,
			area: ['1000px', '600px'],
			content:'/selGetById?recordid=' + recordid,
			end: function () {
				getUserPageList();
			}
		});
	}

</script>

</body>
</html>
